<template>
  <view :class="props.mode == 'pop' ? 'mask' : ''" v-if="showBox">
    <view
      :class="props.mode == 'pop' ? 'verify-box' : ''"
      :style="{ 'max-width': parseInt(props.imgSize.width) + 30 + 'px' }"
    >
      <view class="verify-box-top" v-if="props.mode == 'pop'">
        请完成安全验证
        <text class="verify-box-close icon-close" @click="clickShow = false">
          
        </text>
      </view>
      <view
        class="verify-box-bottom"
        :style="{ padding: props.mode == 'pop' ? '15px' : '0' }"
      >
        <!-- 验证码容器 -->
        <!-- 滑动 -->
        <view v-if="props.captchaType == 'blockPuzzle'">
          <VerifySlide
            :captchaType="'blockPuzzle'"
            :vSpace="props.vSpace"
            :explain="props.explain"
            :imgSize="props.imgSize"
            :blockSize="props.blockSize"
            ref="VerifySlideInstance"
            @success="success"
            @error="error"
          ></VerifySlide>
        </view>
        <!-- 点选 -->
        <view v-else-if="props.captchaType == 'clickWord'">
          <VerifyPoint
            :captchaType="'clickWord'"
            :vSpace="props.vSpace"
            :explain="props.explain"
            :imgSize="props.imgSize"
            ref="VerifyPointsInstance"
            @success="success"
            @error="error"
          ></VerifyPoint>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
/**
 * Verify 验证码组件
 * @description 分发验证码使用
 * */

import { ref, computed, onMounted, shallowRef } from "vue";
import type { PropType } from "vue";
import VerifySlide from "./verifySlider/verifySlider.vue";
import VerifyPoint from "./verifyPoint/verifyPoint.vue";

const props = defineProps({
  captchaType: {
    type: String as PropType<"clickWord" | "blockPuzzle">, //clickWord,blockPuzzle
    required: true,
    default: "blockPuzzle",
  },

  mode: {
    type: String as PropType<"pop" | "">,
    default: "pop",
  },
  vSpace: {
    type: Number,
    default: 5,
  },
  explain: {
    type: String,
    default: "向右滑动完成验证",
  },
  imgSize: {
    type: Object,
    default: () => ({
      width: 310,
      height: 155,
    }),
  },
  blockSize: {
    type: Object,
    default: () => ({
      width: 50,
      height: 50,
    }),
  },
});

const emit = defineEmits(["success", "error"]);

const clickShow = ref(false);
const showBox = computed(() => {
  return props.mode === "pop" ? clickShow.value : true;
});

// const VerifySlideInstance = ref(null);
// const VerifyPointsInstance = ref(null);
const VerifySlideInstance = shallowRef<InstanceType<typeof VerifySlide>>();
const VerifyPointsInstance = shallowRef<InstanceType<typeof VerifyPoint>>();
const refresh = () => {
  if (props.captchaType === "blockPuzzle") {
    VerifySlideInstance.value.refresh();
  } else {
    VerifyPointsInstance.value.refresh();
  }
};

const show = () => {
  if (props.mode === "pop") {
    clickShow.value = true;
    // refresh();
  }
};
const success = (e) => {
  emit("success", e);
  if (props.mode === "pop") {
    clickShow.value = false;
  }
};

const error = () => {
  emit("error");
};

defineExpose({
  refresh,
  show,
});
onMounted(() => {
  // 组件挂载后执行的逻辑
});
</script>
<style scoped>
.verify-box {
  position: relative;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid #e4e7eb;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.verify-box-top {
  padding: 0 15px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  font-size: 16px;
  color: #45494c;
  border-bottom: 1px solid #e4e7eb;
  box-sizing: border-box;
}

.verify-box-bottom {
  /* padding: 15px; */
  box-sizing: border-box;
}



.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  /* display: none; */
  transition: all 0.5s;
}

.verify-box-close {
  position: absolute;
  top: 13px;
  right: 9px;
  width: 24px;
  height: 24px;
  text-align: center;
  cursor: pointer;
}
.icon-close:before {
  content: " ";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  background-image: url("");
  background-size: contain;
}

 
</style>
